<template>
    <div>
        <h2>房号管理-添加</h2>
        <table class="table">
            <tr>
                <td>房号名称</td>
                <td>
                    <input type="text" v-model="from.rname" >
                </td>
            </tr>

            <tr>
                <td>房型价格</td>
                <td>
                    <input type="text" v-model="from.rprice" >
                </td>
            </tr>
            <tr>
                <td>房型面积</td>
                <td>
                    <input type="text" v-model="from.rmj" >
                </td>
            </tr>
            <tr>
                <td>可住人数</td>
                <td>
                    <input type="text" v-model="from.rnus" >
                </td>
            </tr>
            <tr>
                <td>房型图</td>
                <td>
                    <img :src="from.rimg" style="width: 120px;height: 120px;">
                    <input type="file" @change="upload">
                </td>
            </tr>
            <tr>
                <td>介绍</td>
                <td>
                    <input type="text" v-model="from.rmore" >
                </td>
            </tr>
            <tr>
                <td>房型</td>
                <td>
                    <select v-model="from.rtype">
                        <option :value="0">请选择</option>
                        <option value="标间">标间</option>
                        <option value="豪华间">豪华间</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>房态</td>
                <td>
                    <select v-model="from.rsdata"> 
                        <option :value="0">请选择</option>
                        <option value="入住中">入住中</option>
                        <option value="未入住">未入住</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="button" value="添加" @click="add">
                </td>
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">  
import { ref, reactive, onMounted } from "vue";
import axios from "axios";
import "bootstrap/dist/css/bootstrap.min.css"
import { useRouter } from "vue-router"
import router from "@/router";

const from = reactive({
    rname: "",
    rprice: "",
    rmj: "",
    rnus: "",
    rimg: "",
    rmore: "",
    rsdata: 0,
    risdel: false,
    rtype:0
})

const upload = (e:any) => {
    //let file = e.target.files[0];
    let file = e.target.files[0];
    //let formData = new FormData();
    //formData.append("file", file)
    let formData = new FormData();
    formData.append("file",file)

    axios.post("https://localhost:7270/api/RoomType/getFile", formData).then(res => {
        from.rimg = res.data;
    })
}



const add = () => {
    axios.post("https://localhost:7270/api/RoomType/AddRoomType", from).then(res => {
        if (res.data > 0)
        {
        alert("添加成功!")
        router.push("/show")
        }
        else
        {
            alert("添加失败")
        }
    })
}

</script>

<style scoped></style>